<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box" v-if="data">
        <el-card>
		    <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
			<div class="el-table el-table--enable-row-hover el-table--medium">
			  <table cellspacing="0" style="width: 100%">
			    <tbody>
				  <tr>
				    <td class="el-table__cell is-leaf"><div class="cell">个案号</div></td>
				    <td class="el-table__cell is-leaf" colspan="2"><div class="cell" ><strong>{{data.archivesNo}}</strong></div></td>
				    <td class="el-table__cell is-leaf"><div class="cell">咨询师姓名</div></td>
				    <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >{{data.teaFullName}}</div></td>
				  </tr>	
			      <tr>
			        <td class="el-table__cell is-leaf tdbg"><div class="cell">登录名</div></td>
			        <td class="el-table__cell is-leaf"><div class="cell" >{{data.userName}}</div></td>
			        <td class="el-table__cell is-leaf tdbg"><div class="cell">来访者姓名</div></td>
			        <td class="el-table__cell is-leaf"><div class="cell" >{{data.fullName}}</div></td>
			        <td class="el-table__cell is-leaf tdbg"><div class="cell">性别</div></td>
			        <td class="el-table__cell is-leaf"><div class="cell" >{{data.gender}}</div></td>
			      </tr>
				  <tr>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">出生日期</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.birthDate}}</div></td>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">所属部门</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.dept}}</div></td>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">问题类型</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.typeName}}</div></td>
				  </tr>
				  <tr>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">婚姻状态</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.maritalStatus}}</div></td>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">文化程度</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.eduLevel}}</div></td>
				    <td class="el-table__cell is-leaf tdbg"><div class="cell">联系方式</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{data.mobile}}</div></td>
				  </tr>
				 </tbody>
				</table> 
				</div>
		</el-card>
	  </el-col>
	  <el-col :span="24" class="card-box" v-if="data2">
		<el-card>
			<div slot="header"><span><i class="el-icon-monitor"></i> 咨询记录</span></div>
			<el-form>
			<div v-for="(recorditem, recordindex) in data2 " style="margin-bottom: 20px;">
			<div slot="header" class="clearfix" style="border-bottom: 1px solid #e6ebf5;">
				<span>第 <strong>{{recorditem.recordNumber}}</strong> 次咨询记录（{{recorditem.recordDate}}）</span>
		    </div>
			<div class="text item">
				<el-row >
					<el-col :span="2" style="text-align: right;">
					<strong>严重程度评估：</strong></el-col>
					<el-col :span="12"><el-rate
					  v-model="recorditem.severity"
					  text-color="#ff9900">
					</el-rate></el-col>
				</el-row>
				<el-row >
					<el-col :span="2" style="text-align: right;">咨询方式：</el-col>
					<el-col :span="20">{{recorditem.serviceType}}</el-col>
				</el-row>
				<el-row v-for="(item,index) in recorditem.feedbacklist" >
					<el-col :span="2" style="text-align: right;">{{item.feedbackName}}：</el-col>
					<el-col :span="20">{{item.feedbackContent}}</el-col>
				</el-row>
			</div>	
			</div>
			</el-form>
		</el-card>
	</el-col>

	  <el-col :span="24" class="card-box" v-if="data3">
	  	<el-card>
	  		<div slot="header"><span><i class="el-icon-monitor"></i> 结案总结</span></div>
			<el-form>
				<div class="text item">
					<el-row >
						<el-col :span="2" style="text-align: right;">
						<strong>咨询效果评估：</strong></el-col>
						<el-col :span="12"><el-rate
						  v-model="data3.effect"
						  text-color="#ff9900">
						</el-rate></el-col>
					</el-row>
					<el-row v-for="(item,index) in data3.feedbacklist" >
						<el-col :span="2" style="text-align: right;">{{item.feedbackName}}：</el-col>
						<el-col :span="20">{{item.feedbackContent}}</el-col>
					</el-row>
				</div>	
			</el-form>
	  	</el-card>
	  </el-col>

	</el-row>

	<el-form label-width="100px">
	  <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
	    <el-button @click="close()">返回</el-button>
	  </el-form-item>
	</el-form>
  </div>
</template>

<script>
import { getArchives} from "@/api/consult/archives-personal";
import { getClose } from "@/api/consult/archives-close";
import { getRecord } from "@/api/consult/archives-record";

export default {
  name: "viewArchivesPersonal",
  data() {
    return {
		data: null,
		data2: null,
		data3: null,
    };
  },
  created() {
    const archivesId = this.$route.params && this.$route.params.archivesId;
	console.log(archivesId)
	if(archivesId) {
		getArchives(archivesId).then(response => {
		    this.data = response.data;
			getClose(this.data.archivesId).then(response => {
					  if(response.data)
						this.data3 = response.data;
			});
			
			getRecord(this.data.archivesId).then(response => {
					  if(response.data && response.data.length>0)
						this.data2 = response.data;
			});
				
		});
	}
  },
  methods: {
    /** 关闭按钮 */
    close() {
      const obj = { path: "/consult/archives/personal" };
      this.$tab.closeOpenPage(obj);
    }
  },
  mounted() {

  }
};
</script>

<style>
	.tdbg {
		background: rgb(64, 158, 255);
		color:#ffffff;
	}
	
</style>
